<template>
  <div class="index">
    <!-- 导航 tabbar -->
    <div class="tabbar m_pf m_pb0 m_pl0 m_pr0 m_flex m_fjcsa m_faic m_z5"
    :class="tabIndex>0?'tabbar2':''">
      <!-- 首页 -->
      <router-link to="/home" class="tabbar_item m_flex m_fdc m_faic"
      :active-class="tabIndex<1?'active':''"
      @click.native="tabIndexChanged(0)">
        <van-icon name="wap-home" size="25"/>
        <span class="m_fs12">首页</span>
      </router-link>
      <!-- 我的 -->
      <router-link to="/my" tabindex="" class="tabbar_item m_flex m_fdc m_faic"
      :active-class="tabIndex>0?'active':''"
      @click.native="tabIndexChanged(1)">
        <van-icon name="manager" size="25"/>
        <span class="m_fs12">我的</span>
      </router-link>
    </div>
    <!-- 页面出口 -->
    <keep-alive include="Home">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data(){
    return{
      tabIndex: 0,
    }
  },
  methods: {
    // 改变索引
    tabIndexChanged(index){
      this.tabIndex = index
    }
  },
  activated(){
    if(this.$router.history.current.path==='/my'){
      this.tabIndex = 1
    }else{
      this.tabIndex = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar{
  display: flex;
  height: 54px;
  background: #0f0f0f;
  border-top: 1px solid #0f0f0f;
  .tabbar_item{
    color: #fff;
    opacity: .7;
  }
  .active{ opacity: 1;}
}
.tabbar2{
  background: #fff;
  border-color: #e9ebea;
  .tabbar_item{ color: #222; }
}
</style>
